<template>
  <div class="player-box" v-if="songList.length">
    <!-- 播放器 -->
    <audio
      ref="audio"
      :src="curSong.songUrl"
      @canplay="canplay"
      @ended="ended"
      @timeupdate="timeupdate"
    ></audio>
    <!-- 大屏播放器 -->
    <div
      class="full-screen"
      v-if="isFullScreen"
      :style="
        bgurl ? { background: `url(${curSong.pic})` } : { background: '#000' }
      "
    >
      <div class="header">
        <div class="title">
          <van-icon
            @click="toggleScreen(false)"
            name="arrow-down"
            class="xla"
            size="28"
          />
          <!-- <button @click="toggleScreen(false)"></button> -->
          <h2 class="h2a">{{ curSong.name }}</h2>
        </div>
        <p class="pa">{{ curSong.singer }}</p>
      </div>
      <!-- cd -->
      <div class="cd">
        <img
          :class="paused ? 'play paused' : 'play'"
          :src="curSong.pic"
          alt=""
        />
      </div>
      <!-- 歌词 -->
      <Lyric :paused="paused" ref="lyric"></Lyric>
      <!-- 进度条 -->
      <Progress
        :current="currentTime"
        :duration="duration"
        @changeTime="changeCurrentTime"
      ></Progress>
      <!-- 工具栏 -->
      <ul class="bft">
        <li>
          <img class="xhimg" :src="xh" alt="" @click="setLoop" />
        </li>
        <li>
          <img src="../../style/img/syq.png" @click="prevOrNext('prev')" />
        </li>
        <li>
          <van-icon
            color="#ffcd32"
            size="40"
            :name="paused ? 'play' : 'pause'"
            @click="play"
          />
        </li>
        <li>
          <img src="../../style/img/xyq.png" @click="prevOrNext('next')" />
        </li>
        <li>
          <van-icon
            size="32"
            name="like"
            @click="like"
            :color="isLikeState ? '#ffcd32' : '#dbdbdb'"
          />
        </li>
      </ul>
    </div>
    <!-- 小屏播放器 -->
    <div @click.stop="toggleScreen(true)" class="mini-screen" v-else>
      <ul class="bft">
        <li>
          <img :src="curSong.pic" alt="" />
        </li>
        <li>
          <p>{{ curSong.name }}</p>
        </li>
        <li>
          <img
            class="mintp"
            src="../../style/img/syq.png"
            @click.stop="prevOrNext('prev')"
          />
        </li>
        <li>
          <van-icon
            color="#ffcd32"
            size="32"
            :name="paused ? 'play' : 'pause'"
            @click.stop="play"
          />
        </li>
        <li>
          <img
            class="mintp"
            src="../../style/img/xyq.png"
            @click.stop="prevOrNext('next')"
          />
        </li>
      </ul>
      <!-- 歌词 -->
      <Lyric :paused="paused" ref="lyric" style="display: 'none'"></Lyric>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import Progress from "./components/Progress.vue";
import Lyric from "./components/Lyric.vue";
export default {
  components: { Progress, Lyric },
  data() {
    return {
      // controls 播放器
      paused: false, // 歌曲的暂停状态  在播
      duration: 0, // 总时间长
      currentTime: 0, // 当前播放的第几秒
      loop: 1, //1列表循环 2.随机循环 0.单曲循环
      bgurl: false,
      xh: "",
    };
  },
  computed: {
    ...mapState("player", ["songList", "isFullScreen", "curSongIdx"]),
    ...mapGetters("player", ["curSong", "isLikeState"]),
  },
  methods: {
    ...mapMutations("player", [
      "toggleScreen",
      "changeCurSongIdx",
      "addLikesList",
      "randomPlay",
    ]),
    ...mapActions("player", ["prevOrNext"]),
    back() {
      this.$router.history.go(-1);
    },
    play() {
      if (!this.audioRef) return false;
      this.paused = !this.paused;
      // 调用audio的api控制播,
      console.log("歌曲的暂停状态", this.audioRef.paused);
      if (this.audioRef.paused) {
        // 没播
        this.audioRef.play();
      } else {
        // 在播 暂停
        this.audioRef.pause();
      }
    },
    canplay() {
      // 音乐加载完毕可以播放
      console.log("音乐加载完毕可以播放");
      this.audioRef = this.$refs.audio;
      this.duration = this.audioRef.duration;
      this.audioRef.play();
      this.paused = false;
    },
    ended() {
      console.log("歌曲播放完成");
      switch (this.loop) {
        case 1:
          // 列表循环
          this.prevOrNext("next");
          break;
        case 2:
          // 随机循环
          this.randomPlay();
          break;
        // default:
        case 0:
          this.audioRef.play();
          break;
      }
      // this.changeCurSongIdx(this.curSongIdx + 1);
    },
    timeupdate(e) {
      // console.log("时间变了", e.target.currentTime);
      this.currentTime = e.target.currentTime;
    },
    like() {
      this.addLikesList(this.curSong);
    },
    changeCurrentTime(time) {
      // console.log("修改歌曲时间", time);
      // 根据子组件传过来的时间 修改当前歌曲播放时间
      this.audioRef.currentTime = time;
      // 歌词修改 调用子组件的seek
      this.$refs.lyric.seek(time);
    },
    // 切换播放状态
    setLoop() {
      console.log(this.loop, "最开始");
      if (this.loop === 1) {
        this.loop = 2;
        this.xh =
          "";
        this.$toast("随机播放");
        console.log(this.loop, "1变2 列表变随机");
        return;
      }
      if (this.loop === 2) {
        this.loop = 0;
        this.xh =
          "";
        this.$toast("单曲循环");
        console.log(this.loop, "2变0 随机变单曲");
        return;
      }
      if (this.loop === 0) {
        this.loop = 1;
        this.xh =
          "";
        this.$toast("列表循环");
        console.log(this.loop, "0变1 单曲变列表");
        return;
      }
    },
  },
  mounted() {
    // this.audioRef = this.$refs.audio;
  },
};
</script>
<style lang="less" scoped>
@import "styles/index.less";
.player-box {
  font-size: 18px;
  /deep/ .full-screen {
    background-size: 100%;
  }
  .full-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100%;
    // opacity: 0.6;
    // filter: blur(20px);
    z-index: 9;
    .cd {
      .w(300);
      .h(300);
      right: 0;
      bottom: 0;
      left: 0;
      top: 0;
      margin: auto;
      box-sizing: border-box;
      border: 10px solid hsla(0, 0%, 100%, 0.1);
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .bft {
      .w(375);
      .h(60);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      img {
        .w(40);
        .h(40);
      }
      .xhimg {
        .w(30);
        .h(30);
      }
    }
  }
  .mini-screen {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    .h(60);
    z-index: 9;
    .bft {
      .w(375);
      .h(60);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      img {
        .w(40);
        .h(40);
        border-radius: 50%;
      }
      .mintp {
        .w(32);
        .h(32);
      }
      p {
        color: white;
      }
    }
  }
}
.header {
  .h(60);
  .margin-bottom(60);
  .title {
    font-size: 18px;
    .h(40);
    .line-height(40);
    .xla {
      .w(20);
      .h(40);
      color: #ffcd32;
      background: none;
      float: left;
      .margin-top(8);
      .margin-left(8);
    }
    .h2a {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
      width: 80%;
      margin-left: 10%;
      color: #ffcd32;
    }
  }
  .pa {
    text-align: center;
    .h(20);
    color: #ffcd32;
    .margin-top(10);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.play {
  animation: rotate 20s infinite linear;
}

.paused {
  animation-play-state: paused;
}
</style>
